<template>
  <view>
    <view v-if="newList.length > 0">
      <view class="list" v-for="(item, i) in newList" :key="item.id">
        <!-- <view v-if="current == 1 && item.is_songhuo == 0" class="list_ad_title">
        商家 14:28 已完成打包，请尽快前往商家取货
      </view> -->
        <view class="list-top" :style="'padding:24rpx 24rpx 0rpx 24rpx'">
          <view v-if="current == '新任务'">
            <text style="color: #f0250e; margin-right: 10rpx"
              >{{ item.mintune }}分钟内</text
            >
            <text>送达</text>
          </view>
          <view style="color: #f0250e" v-if="current == '新任务'">
            <text style="font-size: 28rpx">￥</text>
            <text style="font-size: 36rpx">{{ item.total_price }}</text>
          </view>
          <view v-if="current == '待取货'">
            <view
              ><text
                v-if="item.mintune > 0"
                style="
                  font-size: 26rpx;
                  font-family: PingFang SC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #262626;
                "
                >还剩
                <text style="color: #fe5f0f; margin: 0 10rpx"
                  >{{ item.mintune }}分钟</text
                >
                送货</text
              >
              <text
                v-if="item.mintune < 0"
                style="
                  font-size: 26rpx;
                  font-family: PingFang SC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #fe5f0f;
                "
                >已超送货时间&nbsp;{{ Math.abs(item.mintune) }}&nbsp;分钟</text
              >
            </view>
          </view>
          <view v-if="current == '待取货'">
            <text>#</text>
            <text
              style="
                font-size: 38rpx;
                font-family: PingFang SC-Semibold, PingFang SC;
                font-weight: 600;
                color: #262626;
              "
              >{{ item.order_no.slice(-4) }}</text
            >
          </view>
          <view v-if="current == '配送中'">
            <view
              ><text
                v-if="item.mintune > 0"
                style="
                  font-size: 26rpx;
                  font-family: PingFang SC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #262626;
                "
                >还剩
                <text style="color: #fe5f0f; margin: 0 10rpx"
                  >{{ item.mintune }}分钟</text
                >
                送货</text
              >
              <text
                v-if="item.mintune < 0"
                style="
                  font-size: 26rpx;
                  font-family: PingFang SC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #fe5f0f;
                "
                >已超送货时间&nbsp;{{ Math.abs(item.mintune) }}&nbsp;分钟</text
              >
            </view>
          </view>
          <view v-if="current == '配送中'">
            <text>#</text>
            <text
              style="
                font-size: 38rpx;
                font-family: PingFang SC-Semibold, PingFang SC;
                font-weight: 600;
                color: #262626;
              "
              >{{ item.order_no.slice(-4) }}</text
            >
          </view>
        </view>
        <view class="list-content" @click="toDetail(item)">
          <view class="list-top-c">
            <view style="margin-right: 30rpx" v-if="current == '新任务'">
              <view
                style="
                  font-size: 24rpx;
                  font-family: PingFang SC-Semibold, PingFang SC;
                  font-weight: 600;
                "
                >{{ item.distance1 }}</view
              >
              <!-- <view
                style="
                  font-size: 20rpx;
                  font-family: PingFang SC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #8c8c8c;
                "
                >km</view
              > -->
            </view>
            <view
              v-if="current == '待取货'"
              style="
                width: 10rpx;
                height: 10rpx;
                background: #fe5f0f;
                border-radius: 50%;
                margin-right: 30rpx;
                margin-top: 40rpx;
              "
            >
            </view>
            <view
              v-if="current == '配送中'"
              style="
                width: 10rpx;
                height: 10rpx;
                background: #8c8c8c;
                border-radius: 50%;
                margin-right: 30rpx;
                margin-top: 40rpx;
              "
            >
            </view>
            <view>
              <view :class="current == '配送中' ? 'title1' : 'title'">
                {{ item.store_name }}
              </view>
              <view :class="current == '配送中' ? 'txt1' : 'txt'">
                {{ item.store_address }}
              </view>
            </view>
          </view>
          <view class="list-top-c">
            <view
              v-if="current == '新任务'"
              style="
                margin-right: 30rpx;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
              "
            >
              <view
                style="
                  font-size: 24rpx;
                  font-family: PingFang SC-Semibold, PingFang SC;
                  font-weight: 600;
                "
                >{{ item.distance2 }}</view
              >
              <!-- <view
                style="
                  font-size: 20rpx;
                  font-family: PingFang SC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #8c8c8c;
                "
                >km</view
              > -->
            </view>
            <view
              v-if="current == '待取货'"
              style="
                width: 10rpx;
                height: 10rpx;
                background: #8c8c8c;
                border-radius: 50%;
                margin-right: 30rpx;
                margin-top: 16rpx;
              "
            >
            </view>
            <view
              v-if="current == '配送中'"
              style="
                width: 10rpx;
                height: 10rpx;
                background: #01ab5b;
                border-radius: 50%;
                margin-right: 30rpx;
                margin-top: 24rpx;
              "
            >
            </view>
            <view>
              <view
                :class="
                  current == '新任务' || current == '配送中'
                    ? 'title'
                    : 'title1'
                "
              >
                {{ item.address }}
              </view>
              <!-- <view :class="current == '新任务' || current == '配送中' ? 'txt' : 'txt1'">
              {{ item.mook_content }}
            </view> -->
            </view>
          </view>
        </view>
        <!-- <view v-if="current == '待取货' && item.is_dabao == 1" class="shop_confirm"
        >商家已确认打包</view
      > -->
        <view v-if="current == '待取货' && item.remark" class="beizhu">
          <text style="font-weight: bold">备注:</text>
          <text> {{ item.remark }}</text>
        </view>
        <view class="border"></view>

        <template v-if="current == '新任务'">
          <!-- 代抢 -->
          <view class="btn1" @click="toAdd(i)"> 抢单 </view>

          <!-- <view v-else class="btn2">
            <view class="jujue">拒绝({{ miao }}秒)</view>
            <view @click="OnReceivingOrders(item)" class="confirm">确认</view>
          </view> -->
        </template>
        <view v-if="current == '待取货'" class="btn3">
          <view class="phone" @click="takePhone(item.contact_tel)">
            <u-icon name="phone-fill" color="#000" size="40"></u-icon>
            <view>联系商家</view>
          </view>
          <view class="btn3_o" @click="confirmToshow(item)"> 我已取货 </view>
        </view>
        <view v-if="current == '配送中'" class="btn3">
          <view class="phone" @click="takePhone(item.mobile)">
            <u-icon name="phone-fill" color="#000" size="40"></u-icon>
            <view>联系顾客</view>
          </view>
          <view
            class="btn3_o"
            style="background-color: #01ab5b"
            @click="orderSongda(item)"
          >
            我已送达
          </view>
        </view>
      </view>
    </view>
    <u-empty mode="data" v-else></u-empty>
    <u-popup
      v-model="confirmshow"
      @close="confirmshow = false"
      mode="center"
      border-radius="40"
    >
      <view class="popup">
        <view class="p_title">
          <text>确认已取到货品?</text>
          <text>#{{ popup_content.order_no }}</text>
        </view>
        <view
          class="shop_name"
          style="
            font-size: 30rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #262626;
            margin-top: 20rpx;
          "
        >
          {{ popup_content.store_name }}
        </view>
        <view class="btn">
          <view class="left" @click="confirmshow = false">取消</view>
          <view class="right" @click="confirm">确认收货</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: [],
    },
    current: {
      type: String,
      default: "新任务",
    },
  },
  watch: {
    list: {
      handler(val, olv) {
        this.newList = val || [];
      },
      immediate: true,
    },
  },
  data() {
    return {
      is_add_id: 0,
      miao: 60,
      timeer: null,
      confirmshow: false,
      popup_content: {},
      newList: [],
    };
  },
  mounted() {
  },
  methods: {
    toAdd(i) {
      uni.showModal({
        title: "抢单",
        content: "您确定选择当前订单吗？",
        showCancel: true,
        cancelText: "取消",
        cancelColor: "#000000",
        confirmText: "确定",
        confirmColor: "#3CC51F",
        success: (result) => {
          if (result.confirm) {
            this.$emit('orderTaking')
            this.OnReceivingOrders(this.newList[i]);
          }
        },
        fail: () => {},
        complete: () => {},
      });
    },
    takePhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber,
      });
    },
    toDetail(i) {
      this.$utils.toUrl(
        `/distribution/order/map_order?isSongda=${this.current}&i=${encodeURIComponent(JSON.stringify(i))}`,
        "navigate"
      );
    },
    async orderSongda(val) {
      const res = await this.$allrequest.distribution.orderAdd(
        { id: val.id },
        true
      );
      if (res.code == 0) {
        this.$utils.toast(res.msg);
        this.$emit("confirm");
      }
    },
    confirmToshow(item) {
      this.confirmshow = true;
      this.popup_content = item;
      this.popup_content.order_no = this.popup_content.order_no.slice(-4);
    },
    async confirm() {
      this.confirmshow = false;
      const res = await this.$allrequest.distribution.confirmAdd(
        { id: this.popup_content.id },
        true
      );
      if (res.code == 0) {
        this.$emit("confirm");
      }
    },
    async OnReceivingOrders(item) {
      const res = await this.$allrequest.distribution.orderBind(
        { order_id: item.id },
        true
      );
      this.$emit("refreshList");
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  // padding: 24rpx;
  width: 702rpx;
  // height: 430rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  opacity: 1;
  margin: 24rpx auto;
  padding-bottom: 24rpx;

  .list_ad_title {
    width: 702rpx;
    height: 64rpx;
    font-size: 26rpx;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    background: #02b368;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    margin-bottom: 24rpx;
    padding-left: 24rpx;
    line-height: 64rpx;
  }

  .list-top {
    padding: 0 24rpx;

    display: flex;
    font-size: 28rpx;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #262626;
    line-height: 34rpx;
    justify-content: space-between;
  }

  .list-content {
    padding: 0 24rpx;
    margin-top: 30rpx;

    .list-top-c {
      margin-bottom: 30rpx;
      display: flex;

      .title {
        font-size: 38rpx;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #262626;
      }

      .title1 {
        font-size: 30rpx;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #8c8c8c;
      }

      .txt {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #262626;
      }

      .txt1 {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #8c8c8c;
      }
    }
  }

  .border {
    width: 100%;
    height: 2rpx;
    background: #f8f8f8;
  }
  .shop_confirm {
    width: 188rpx;
    height: 38rpx;
    background: #ffffff;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    opacity: 1;
    border: 2rpx solid #ffccb3;
    font-size: 24rpx;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #fe5f0f;
    line-height: 38rpx;
    text-align: center;
    margin-left: 72rpx;
    margin-bottom: 30rpx;
  }
  .beizhu {
    width: 604rpx;
    height: 60rpx;
    background: #f8f8f8;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #262626;
    padding-left: 12rpx;
    opacity: 1;
    margin-left: 72rpx;
    line-height: 60rpx;
    margin-bottom: 30rpx;
  }
  .btn1 {
    width: 654rpx;
    height: 84rpx;
    background: #f0250e;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    opacity: 1;
    line-height: 84rpx;
    text-align: center;
    font-size: 34rpx;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    margin: 0 auto;
    margin-top: 24rpx;
  }

  .btn2 {
    display: flex;
    justify-content: space-between;
    margin-top: 24rpx;
    padding: 0 24rpx;

    .jujue {
      width: 316rpx;
      height: 84rpx;
      background: #ffffff;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      opacity: 1;
      border: 2rpx solid #f2f2f2;
      line-height: 84rpx;
      text-align: center;
      font-size: 34rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #262626;
    }

    .confirm {
      width: 316rpx;
      height: 84rpx;
      background: #f0250e;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      opacity: 1;
      line-height: 84rpx;
      text-align: center;
      font-size: 34rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }
  }
}

.btn3 {
  display: flex;
  padding: 0rpx 24rpx;
  align-items: center;
  margin-top: 24rpx;
  justify-content: space-between;

  .phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #262626;
    // margin-right: 20rpx;
  }

  .btn3_o {
    width: 554rpx;
    height: 84rpx;
    background: #fe5f0f;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    line-height: 84rpx;
    text-align: center;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    font-size: 34rpx;
  }
}
.popup {
  width: 674rpx;
  height: 412rpx;
  background: #ffffff;
  // border-radius: 20rpx 20rpx 20rpx 20rpx;
  opacity: 1;
  // border: 2rpx solid #707070;
  padding: 80rpx 40rpx;
  padding-bottom: 42rpx;
  .p_title {
    display: flex;
    justify-content: space-between;
    font-size: 44rpx;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #262626;
  }
  .btn {
    display: flex;
    justify-content: space-between;
    margin-top: 80rpx;
    .left {
      width: 286rpx;
      height: 88rpx;
      background: #ffffff;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      opacity: 1;
      border: 2rpx solid #f2f2f2;
      line-height: 88rpx;
      text-align: center;
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #262626;
    }
    .right {
      width: 286rpx;
      height: 88rpx;
      background: #fe5f0f;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      opacity: 1;
      line-height: 88rpx;
      text-align: center;
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }
  }
}
</style>
